import React from 'react';
import { findDOMNode } from 'react-dom';
import cx from 'classnames';
import style from './style';

let prev;

export default
class Menu extends React.Component {

  static propTypes = {
    onClose: React.PropTypes.func,
    onOpen: React.PropTypes.func,
    center: React.PropTypes.bool,
    right: React.PropTypes.bool,
    autoClose: React.PropTypes.bool,
    showByHover: React.PropTypes.bool,
    className: React.PropTypes.string,
    onClick: React.PropTypes.func,
    children: React.PropTypes.array,
  };

  state = {
    clicked: false,
    enter: false,
  };

  componentDidMount() {
    this.root = findDOMNode(this);
    const [clicked, list] = Array.from(this.root.children);
    const { width } = list.getBoundingClientRect();
    const { width: clickedWidth } = clicked.getBoundingClientRect();
    if (this.props.center) {
      list.style.marginRight = `-${width / 2 - clickedWidth / 2}px`;
    }

    if (!this.props.showByHover) {
      clicked.addEventListener('click', ::this.handleClick);
    }
  }

  componentWillUnmount() {
    if (this.props.autoClose !== false) {
      document.removeEventListener('click', this.close);
    }
  }

  handleClick() {
    if (this.state.clicked) {
      this.close();
      if (this.props.onClose) this.props.onClose();
    } else {
      if (prev) prev.close();
      prev = this;
      this.setState({
        clicked: true,
      });
      // 点击空白关闭
      if (this.props.autoClose !== false) {
        document.addEventListener('click', this.close);
      }
      if (this.props.onOpen) this.props.onOpen();
    }
    if (this.props.onClick) this.props.onClick();
  }

  handleRootClick(e) {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }

  handleMouseEnter() {
    this.setState({
      enter: true,
    });
  }

  handleMouseLeave() {
    this.setState({
      enter: false,
    });
  }

  close = () => {
    this.setState({
      clicked: false,
    });

    if (this.props.autoClose !== false) {
      document.removeEventListener('click', this.close);
    }
  };

  render() {
    let evts = {};
    if (!this.props.showByHover) {
      evts = {
        ...evts,
        onClick: ::this.handleRootClick,
      };
    } else {
      evts = {
        ...evts,
        onMouseEnter: ::this.handleMouseEnter,
        onMouseLeave: ::this.handleMouseLeave,
        onClick: ::this.handleMouseLeave,
      };
    }
    return (
      <div
        className={cx(style.root, {
          [this.props.className]: this.props.className,
          [style.active]: this.state.clicked,
          [style.right]: this.props.right || this.props.center,
          [style['show-by-hover']]: this.props.showByHover,
          [style.enter]: this.state.enter,
        })}
        {...evts}
      >
        {
          React.Children.map(this.props.children, (child, i) => React.cloneElement(child, {
            className: cx(child.props.className, {
              [style.list]: i === 1,
            }),
            ...(typeof child.type === 'string' ? {} : { onClose: this.close }),
          }))
        }
      </div>
    );
  }
}
